<template>
	<div class="energyunit">
		<div class="warning-top">
			<div class="warning-item">
				<div class="titles">
					<p>能量流图</p>
				</div>
				<div class="echats-con" style="text-align: center">
					<div class="nlll-item">
						<p>
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;有功功率(kW)
						</p>
						<p>
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;无功功率(kVar)
						</p>
						<br />
						<br />
						<br />
						<br />
						<p>
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SOC(%)
						</p>
						<p>
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;电压(V)
						</p>
						<p>
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;电流(A)
						</p>
					</div>
					<energyFlowUnit :state="cfdState" />
					<div class="nllr-item">
						<p>{{ PCSInfo.Preal.toFixed(2) }}kW</p>
						<p>{{ PCSInfo.Qreal.toFixed(2) }}kVar</p>
						<br />
						<br />
						<br />
						<br />
						<p>{{ stackInfo.SOC.toFixed(2) }}%</p>
						<p>{{ stackInfo.StackVoltage.toFixed(2) }}V</p>
						<p>{{ stackInfo.StackCurrent.toFixed(2) }}A</p>
					</div>
				</div>
			</div>
			<div class="warning-item">
				<div class="titles">
					<p>PCS实时有功功率</p>
				</div>
				<div class="echats-con">
					<xtxlPSC :info="pcsWaringList" />
				</div>
			</div>
		</div>
		<div class="warning-top">
			<div class="warning-item">
				<div class="titles">
					<p>SOC统计</p>
				</div>
				<div class="echats-con">
					<SOCLine :id="id" :cname="cname" />
				</div>
			</div>
			<div class="warning-item">
				<div class="titles">
					<p>间隔近7日充放电量</p>
				</div>
				<div class="echats-con">
					<the7CGED :id="id" :cname="cname" />
				</div>
			</div>
			<!-- <div class="warning-item">
				<div class="titles">
					<p>间隔近7日收益</p>
				</div>
				<div class="echats-con">
					<the7Earning :id="id" />
				</div>
			</div> -->
		</div>
		<div class="warning-top">
			<div class="warning-item warning-item1">
				<div class="titles">
					<p>{{ cname }}-PCS</p>
				</div>
				<div class="echats-con echats-con1" style="overflow-x: scroll">
					<el-tabs class="warning-con" type="card">
						<el-tab-pane
							:label="item.cname"
							v-for="item in pcsWaringList"
							:key="item.id"
						>
							<div class="bxjgcon">
								<div style="color: #ffc70e" class="bxjgconitem">
									UV电网线电压(V):{{ item.VoltageAB.toFixed(2) }}
								</div>
								<div style="color: #ff7f57" class="bxjgconitem">
									U相输出电流(A):{{ item.CurrentA.toFixed(2) }}
								</div>
								<div style="color: #08c2c2" class="bxjgconitem">
									V相输出电流(A):{{ item.CurrentB.toFixed(2) }}
								</div>
								<div style="color: #ffc70e" class="bxjgconitem">
									W相输出电流(A):{{ item.CurrentC.toFixed(2) }}
								</div>
								<div style="color: #ff7f57" class="bxjgconitem">
									当日充电量(kWh):{{ item.DailyChargeEnergy.toFixed(2) }}
								</div>
								<div style="color: #08c2c2" class="bxjgconitem">
									当日放电量(kWh):{{ item.DailyDischargeEnergy.toFixed(2) }}
								</div>
								<div style="color: #ffc70e" class="bxjgconitem">
									输出有功功率(kW):{{ item.active_power.toFixed(2) }}
								</div>
								<div style="color: #ff7f57" class="bxjgconitem">
									输出无功功率(kW):{{ item.reactive_power.toFixed(2) }}
								</div>
							</div>
						</el-tab-pane>
					</el-tabs>
				</div>
			</div>
			<div class="warning-item warning-item1">
				<div class="titles">
					<p>{{ cname }}-电池堆</p>
				</div>
				<div class="echats-con echats-con1" style="overflow-x: scroll">
					<el-tabs class="warning-con" type="card">
						<el-tab-pane
							:label="item.cname"
							v-for="item in batteryStackWaringList"
							:key="item.id"
						>
							<div class="bxjgcon">
								<div style="color: #ff7f57" class="bxjgconitem">
									堆总电压(V):{{ item.StackVoltage.toFixed(2) }}
								</div>
								<div style="color: #08c2c2" class="bxjgconitem">
									堆总电流(A):{{ item.StackCurrent.toFixed(2) }}
								</div>
								<div style="color: #ffc70e" class="bxjgconitem">
									堆最高电池电压(V):{{ item.Max_CellVoltage.toFixed(2) }}
								</div>
								<div style="color: #ff7f57" class="bxjgconitem">
									堆最低电池电压(V):{{ item.Min_CellVoltage.toFixed(2) }}
								</div>
								<div style="color: #08c2c2" class="bxjgconitem">
									堆最高电池温度(℃):{{ item.Max_CellTemperature.toFixed(2) }}
								</div>
								<div style="color: #ffc70e" class="bxjgconitem">
									堆最低电池温度(℃):{{ item.Min_CellTemperature.toFixed(2) }}
								</div>
								<!-- <div style="color: #ffc70e" class="bxjgconitem">
									系统运行状态:
									<span v-if="item.state == 0">静置</span>
									<span v-if="item.state == 1">放电</span>
									<span v-if="item.state == 2">充电</span>
								</div>
								<div style="color: #ffc70e" class="bxjgconitem">
									系统充放电状态:
									<span v-if="item.chargState == 0">正常</span>
									<span v-if="item.chargState == 1">禁充</span>
									<span v-if="item.chargState == 2">禁放</span>
									<span v-if="item.chargState == 3">待机</span>
									<span v-if="item.chargState == 4">停机</span>
								</div> -->
							</div>
						</el-tab-pane>
					</el-tabs>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import {
	getPcsWaring,
	batteryStackWaring,
	boxWarning,
	// realtimeInfo,
	runningState,
} from "@/api/modules/energyunit";
import { findDataByDevIdAndName, findChildrenData } from "@/api/modules/home";
import xtxlPSC from "./components/xtxlPSC.vue";
import xtxlXB from "./components/xtxlXB.vue";
import xtxlCCDY from "./components/xtxlCCDY.vue";
import xtxlDDY from "./components/xtxlDDY.vue";
import SOCLine from "./components/SOCLine.vue";
import the7CGED from "./components/the7CGED.vue";
import the7Earning from "./components/the7Earning.vue";
import energyFlowUnit from "./components/energyFlowUnit.vue";

export default {
	components: {
		xtxlPSC,
		xtxlXB,
		xtxlCCDY,
		xtxlDDY,
		SOCLine,
		the7CGED,
		the7Earning,
		energyFlowUnit,
	},
	props: {},
	data() {
		return {
			timer: null,
			cname: "",
			id: this.$route.query.id ? this.$route.query.id : "112871465660973057",
			pcsWaringList: [],
			batteryStackWaringList: [],
			boxWarningList: {},
			gjxxList: [],
			infoCNDy: [],
			cfdState: 0,
			stackName: "堆",
			stackInfo: {
				SOC: 0,
				StackVoltage: 0,
				StackCurrent: 0,
			},
			PCSInfo: {
				Preal: 0,
				Qreal: 0,
			},
		};
	},
	watch: {},
	computed: {},
	methods: {
		getDate(id) {
			// 储能单元-PCS电压电流
			findChildrenData({
				devId: id,
				sampleName:
					"VoltageAB,CurrentA,CurrentB,CurrentC,DailyChargeEnergy,DailyDischargeEnergy,active_power,reactive_power",
				type: 4,
			}).then((res) => {
				this.pcsWaringList = res.data;
				this.getStackPCSInfo();
			});
			// 储能单元-电池堆
			findChildrenData({
				devId: id,
				sampleName:
					"StackVoltage,StackCurrent,Max_CellVoltage,Min_CellVoltage,Max_CellTemperature,Min_CellTemperature",
				type: 3,
			}).then((res) => {
				this.batteryStackWaringList = res.data;
				this.stackName = this.batteryStackWaringList[0].name;
				this.getStackInfo();
			});
			boxWarning({ unitId: id }).then((res) => {
				this.boxWarningList = res.data;
			});
			runningState({ id: this.id }).then((res) => {
				if (res.code == 200) {
					this.infoCNDy = res.data.filter((item) => {
						return item.id == id;
					});
				}
			});
			// realtimeInfo({ id: id }).then((res) => {
			// 	if (res.code == 200) {
			// 		this.gjxxList = res.data
			// 	}
			// })
			findChildrenData({ devId: id, sampleName: "State", type: 3 }).then(
				(res) => {
					if (res.data.length > 0) {
						this.cfdState = res.data[0].State;
					}
				}
			);
		},
		//获得堆信息
		getStackInfo() {
			if (this.batteryStackWaringList.length > 0) {
				if (this.batteryStackWaringList[0].id) {
					findDataByDevIdAndName({
						devId: this.batteryStackWaringList[0].id,
						sampleName: "SOC,StackVoltage,StackCurrent",
					}).then((res) => {
						if (res.code == 200) {
							this.stackInfo = res.data;
						}
					});
				}
			}
		},
		//获得PCS信息
		getStackPCSInfo() {
			if (this.pcsWaringList.length > 0) {
				if (this.pcsWaringList[0].id) {
					findDataByDevIdAndName({
						devId: this.pcsWaringList[0].id,
						sampleName: "Preal,Qreal",
					}).then((res) => {
						if (res.code == 200) {
							this.PCSInfo = res.data;
						}
					});
				}
			}
		},
	},
	destroyed() {
		clearInterval(this.timer); //页面销毁时清除定时器
	},
	mounted() {
		// let id = this.$route.query.id ? this.$route.query.id : '112871465660973057'
		this.id = this.$route.query.id
			? this.$route.query.id
			: "112871465660973057";

		this.cname = this.$route.query.name ? this.$route.query.name : "148间隔";

		this.getDate(this.id);
		if (this.timer) {
			clearInterval(this.timer);
		} else {
			this.timer = setInterval(() => {
				this.getDate(this.id);
			}, 60000);
		}
	},
};
</script>
<style lang="scss">
.energyunit {
	width: 100%;
	/* height: 100%; */

	.warning-top {
		display: flex;
		justify-content: space-around;
		position: relative;
		/* height: 300px; */
		gap: 40px 20px;
		margin-bottom: 20px;

		.warning-item {
			height: 330px;
			flex: 1;

			.echats-con {
				width: 100%;
				height: calc(100% - 52px);
				justify-content: space-around;
				position: relative;
				display: flex;

				.el-tabs {
					height: 90%;
					margin: 5% auto;
					width: 90%;
					background: none;
					border: none;

					> .el-tabs__header {
						background: none;
						margin: 0;
						padding: 0;

						.el-tabs__nav {
							border: none;

							.el-tabs__item {
								/* height: 45px; */
								background-color: #7487a7;
								font-weight: 400;
								font-size: 13px;
								color: #ffffff;
								border: none;

								.el-icon-close {
									height: 18px;
									width: 18px;
									font-size: 18px;
								}
							}

							.el-tabs__item.is-active {
								background-color: #0060ff;
							}
						}
					}
				}

				.bxjgcon {
					background: rgba(255, 255, 255, 0.01);
					border: 1px solid #244c8c;
					left: 60px;
					margin-top: 10px;
					top: 0;
					width: 100%;

					.bxjgconitem {
						height: 40px;
						border-bottom: 1px solid #244c8c;
						line-height: 40px;
						padding-left: 10px;

						&:last-child {
							border: none;
						}
					}
				}

				.xfxx-item {
					width: calc(100% - 40px);
					min-height: 30px;
					margin: 5px 13px 0 13px;
					padding-left: 10px;

					position: relative;

					background: rgba(255, 255, 255, 0.01);
					border-radius: 0px 0px 0px 0px;
					border: 1px solid #244c8c;

					span {
						font-weight: 400;
						font-size: 12px;
						color: #ffffff;
						line-height: 30px;
						text-align: left;
					}
				}

				.xfxx-itemred {
					background: rgba(128, 31, 1, 0.41);
					border-radius: 0px 0px 0px 0px;
					border: 1px solid rgba(128, 31, 1, 1);
				}

				.bxjg {
					margin: 10px 40px;
					/* height: 122px; */
					position: relative;
					width: 100%;

					.bxjgcon {
						background: rgba(255, 255, 255, 0.01);
						border: 1px solid #244c8c;
						/* height: 122px; */
						/* position: absolute; */
						left: 60px;
						margin-top: 10px;
						top: 0;
						width: calc(100% - 60px);

						.bxjgconitem {
							height: 40px;
							border-bottom: 1px solid #244c8c;
							line-height: 40px;
							padding-left: 10px;

							&:last-child {
								border: none;
							}
						}
					}
				}

				.gx-item {
					margin: 10px;
					flex-shrink: 0;

					img {
						height: 74px;
					}

					.imgs {
						height: 74px;
						width: 40px;
						background-image: url(./../../assets/img/Group_3.png);
						background-size: cover;
						background-repeat: no-repeat;
						margin-bottom: 10px;
						position: relative;

						.conten {
							width: 26px;
							/* background: #29BC77; */
							position: absolute;
							bottom: 7px;
							left: 7px;
							/* height: 55px; */
						}
					}

					/* width: 100px; */
					.bxjgcon {
						background: rgba(255, 255, 255, 0.01);
						border: 1px solid #244c8c;
						margin-top: 10px;

						.bxjgconitem {
							height: 30px;
							border-bottom: 1px solid #244c8c;
							line-height: 30px;
							padding: 0 10px;
							color: #fff;

							&:last-child {
								border: none;
							}
						}
					}
				}

				.nlll-item {
					width: 160px !important;
					height: 94px;
					border-radius: 4px 4px 4px 4px;
					margin-left: 160px;
					margin-top: 75px;
					p {
						text-align: left;
						height: 30px;
						font-weight: 200;
						font-size: 14px;
						color: #ffffff;
						line-height: 30px;
					}
				}
				.nllr-item {
					width: 160px !important;
					height: 94px;
					border-radius: 4px 4px 4px 4px;
					margin-right: 160px;
					margin-top: 75px;
					p {
						text-align: left;
						height: 30px;
						font-weight: 200;
						font-size: 14px;
						color: #ffffff;
						line-height: 30px;
					}
				}
			}
		}
	}
}
</style>
